// 首页的逻辑
// 1. 拿到 lcoalStorage 内的信息
// id: 为了知道当前登录的是哪一个用户
const id = window.localStorage.getItem('id')
// token: 因为请求当前用户信息的时候, 服务器要求你需要携带这个凭证
//        才能根据凭证证明你登录过, 并且是在有效期内登录过
//        才能给你当前用户的信息
const token = window.localStorage.getItem('token')

// 1. 获取页面元素
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')

// 2. 判断
// 没有 id 说明, 你没有登录过
// 那么直接显示 您好 请登录
if (!id) {
  onBox.classList.remove('active')
  offBox.classList.add('active')
}

// 3. 在首页发送请求, 请求当前登录用户的个人信息
// 目的:
//   1. 为了拿到当前用户的 用户昵称
//   2. 为了验证一下当前的登录状态是不是过期了
//      因为只要登录状态过期了, 是拿不到数据的
//      只有登录状态没有过期, 才能拿到数据
const xhr = new XMLHttpRequest()

xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)

xhr.onload = function () {
  const res = JSON.parse(xhr.responseText)
  // 如果你的 token 是正常的, 那么得到一个当前用户的信息(包含 昵称 等信息)
  // 如果你的 token 是过期的, 那么得不到一个信息, 得到的是过期的信息

  // 判断, 如果是 401 说明, 登录过期了, 需要从新登录, 也得显示 您好请登录
  if (res.code === 401) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
  }

  // 拿到正常的用户信息了, 那么直接显示 您好 xxxx 个人中心 注销登录
  if (res.code === 1) {
    onBox.firstElementChild.innerText = res.info.nickname
    offBox.classList.remove('active')
    onBox.classList.add('active')
  }
}

// 在请求头内书写一个 authorization 信息
// 因为服务器要求, 在请求头内加一个 authorization 信息, 表示你登录过的凭证
xhr.setRequestHeader('authorization', token)

xhr.send()

// 注销登录的点击事件
const logoutBtn = document.querySelector('.logout')
logoutBtn.addEventListener('click', async () => {
  // 不光要删除 lcoalStroage 内的信息
  // 还要发送请求, 告诉服务器, 该账号退出, 让本次的 token 时效
  const res = await pAjax({
    url: 'http://localhost:8888/users/logout',
    data: { id },
    dataType: 'json'
  })

  // 根据 res.code 来操作刷新一下页面
  // 顺便把 lcoalStorage 内的信息也删除
  if (res.code === 1) {
    window.localStorage.removeItem('id')
    window.localStorage.removeItem('token')

    // 刷新页面
    window.location.reload()
  }
})
ajax({
  url: 'http://localhost:9999/content',
  method: 'GET',
  data: {v:""},
  dataType: 'json',
  success (res) {
    let arr=[4,6,8,10,12,14]
    let floor=document.querySelectorAll(".content-floor")
    res.data.floors[0].data.list.forEach((item)=>{
      document.querySelector(".popular").innerHTML+=`<img src="${item.pic}">`
    })
    // console.log(floor.length)
    for(let i=0;i<floor.length;i++){
      floor[i].innerHTML=`<a href="./list.html" data-id="${res.data.floors[arr[i]].data.poster.url.split("=")[1].split("&")[0]}" class="content-list"><img src="${res.data.floors[arr[i]].data.poster.pic}"></a>`
      res.data.floors[arr[i]].data.list.forEach((item)=>{
        floor[i].innerHTML+=`<a href="./detail.html" data-id="${item.itemId}" class="content-detail">
        <div>
          <span>${item.label}</span>
          <img src="${item.img}">
          <p class="content-name">${item.title}<span>${item.desc}</span></p>
          <p class="content-pice">￥${item.originPrice}</p>
        </div>
    </a>`
      })
        
    }
    document.querySelectorAll(".content-detail>div>span").forEach((item)=>{
      if(!item.innerHTML)item.style.backgroundColor="transparent"
      // console.log(item)
    })
    document.querySelectorAll(".content-detail").forEach(item=>item.addEventListener("click", clickcontentbottom))
    document.querySelectorAll(".content-list").forEach(item=>item.addEventListener("click", clicklist))
    
      // floor[0].innerHTML=`<a href="./list.html" data-id="" class="content-list"><img src="https://p2.ssl.qhimg.com/t010270e51d5a815568.webp"></a>`
    
  }
})
function aaa(data){
  let str=""
  data.data.list.forEach(item=>{
    str+=`<a href="./detail.html" data-id="${item.itemId}">
    <div>
      <img src="${item.img}">
      <p class="bottom-name">${item.title}</p>
      <p class="bottom-pice">￥${item.price}</p>
      <p><span>${item.tagString}</span></p>
    </div>
  </a>`
  })
  document.querySelector(".content-bottom").innerHTML+=str
  document.querySelectorAll(".content-bottom>a>div>p>span").forEach(item=>{
    if(item.innerHTML==="undefined"){
      item.innerHTML=""
      item.style.opacity=0;
    }
  })
  document.querySelectorAll(".content-bottom>a").forEach(item=>{
    item.addEventListener("click",clickcontentbottom,true)
  })
  
}
function clickcontentbottom(e){
  // console.log(e.target.dataset.id)
  const goodsId = e.target.dataset.id
    window.sessionStorage.setItem('goodsId', goodsId)
}
function clicklist(e){
  const listId = e.target.dataset.id
    window.sessionStorage.setItem('listId', listId)
}